<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>add</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" th:href="@{/front/js/layui/css/layui.css}" type="text/css">
</head>
<body>

<form class="layui-form" th:action="@{/house/add}" style="padding-top: 10px; padding-right: 50px;">
    <!--标题-->
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!--宣传图（单图）-->
    <div class="layui-form-item">
        <label class="layui-form-label">宣传图</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test1">上传</button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <img class="layui-upload-img" id="demo1" width="100px">
        </div>
    </div>

    <!--详情图-->
    <div class="layui-form-item">
        <label class="layui-form-label">详情图</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test2">上传</button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <div class="layui-upload-list" id="demo2"></div>
        </div>
    </div>

    <!--城市-->
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-block">
            <input type="text" name="city" id="city" required  lay-verify="required" placeholder="请输入城市" autocomplete="off" class="layui-input">
        </div>
    </div>

     <!--租金-->
    <div class="layui-form-item">
        <label class="layui-form-label">租金</label>
        <div class="layui-input-inline">
            <input type="text" name="rent" required  lay-verify="required" placeholder="例如“123”" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">(¥/月)</div>
    </div>

    <!--面积-->
    <div class="layui-form-item">
        <label class="layui-form-label">面积</label>
        <div class="layui-input-block">
            <input type="text" name="area" required  lay-verify="required" placeholder="例如“20平”" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!--房屋类型-->
    <div class="layui-form-item">
        <label class="layui-form-label">房屋类型</label>
        <div class="layui-input-block">
            <input type="text" name="type" required  lay-verify="required" placeholder="房屋类型" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!--出租方式-->
    <div class="layui-form-item">
        <label class="layui-form-label">租房方式</label>
        <div class="layui-input-block">
            <input type="radio" name="mode" value="合租" title="合租" checked>
            <input type="radio" name="mode" value="整租" title="整租" >
        </div>
    </div>

    <!--房屋说明-->
    <div class="layui-form-item">
        <label class="layui-form-label">房屋说明</label>
        <div class="layui-input-block">
            <input type="text" name="explain" required  lay-verify="required" placeholder="房屋说明" autocomplete="off" class="layui-input">
        </div>
    </div>

   <!-- 配套设施-->
    <div class="layui-form-item">
        <label class="layui-form-label">配套设施</label>
        <div class="layui-input-block">
            <input type="text" name="facilities" required  lay-verify="required" placeholder="配套设施" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!--交通情况-->
    <div class="layui-form-item">
        <label class="layui-form-label">交通情况</label>
        <div class="layui-input-block">
            <input type="text" name="trafficInfo" required  lay-verify="required" placeholder="交通情况" autocomplete="off" class="layui-input">
        </div>
    </div>
  <!--地址-->
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block">  <!--readonly-->
            <input type="text" name="address"  id="address"  required  lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <div id="container" style="width: 700px; height: 500px;"></div>
        </div>
    </div>

    <!--提交、重置按钮-->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=AyI4O6S4sfPiP2gGaoGBAQq6Uy25Xt8Y"></script>
<script th:src="@{/front/js/layui/layui.js}"></script>
<script>
    layui.use(['form', 'upload', 'jquery'], function(){
        let form = layui.form;
        let upload = layui.upload;
        let $ = layui.jquery;

        //监听提交
        form.on('submit(formDemo)', function(data){
            $.ajax({
                url : $('form').attr('action'),
                type : 'POST',
                cache : false,
                data : new FormData($('form')[0]),
                processData : false,
                contentType : false,
                success : function(result) {

                    parent.layui.table.reload("demo", {
                        page: {curr: 1}
                    });
                    //上传成功后的回调方法
                    let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                }
            });
            return false;
        });

        //宣传图上传
         upload.render({
            elem: '#test1'
            ,field: 'fileImg'
            ,auto: false
            ,choose: function(obj){
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,progress: function(n, elem, res, index){
                 var percent = n + '%' //获取进度百分比
                 element.progress('demo', percent); //可配合 layui 进度条元素使用

                 console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
                 console.log(res); //得到 progress 响应信息
                 console.log(index); //得到当前上传文件的索引，多文件上传时的进度条控制，如：
                 element.progress('demo-'+ index, n + '%'); //进度条
             }
        });


        //详情图上传
        upload.render({
            elem: '#test2'
            ,field: 'fileArr'
            ,auto: false
            ,multiple: true
            ,choose: function(obj){
                $('#demo2').empty();
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" width="100px">')
                });
            }
        });

        //地图
        let map = new BMapGL.Map("container");
        let point = new BMapGL.Point(114.3207768818557, 30.42939931041774);
        let gc = new BMapGL.Geocoder();
        map.centerAndZoom(point, 16);
        let marker = new BMapGL.Marker(point); // 创建标注
        map.addOverlay(marker);
        //输入地址,在地图上显示,并返回详细地址
        let addressInput = $('#address');
        let city = '武汉';
        $('#city').blur(()=>{
            city = $('#city').val()
        })
        addressInput.blur(()=>{//输入框失去焦点时
            let address = addressInput.val();
            //清除地图上所有的覆盖物
            map.clearOverlays();
            gc.getPoint(address, function(point){
                if (point) {
                    map.centerAndZoom(point, 16);
                    let marker = new BMapGL.Marker(point);
                    map.addOverlay(marker);
                    //根据输入的地址解析成详细地址
                    gc.getLocation(point, function(rs){
                        //alert(`${rs.address}${address}(${point.lng},${point.lat}`)
                        addressInput.val(`${rs.address}${address}`);
                    });

                }else{
                    alert("您选择地址没有解析到结果!");
                }
            }, city);
        })
        //地图点击事件
        map.addEventListener('click', function(e) {
            //清除地图上所有的覆盖物
            map.clearOverlays();
            let pt = e.latlng;
            let marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
            map.addOverlay(marker);
            gc.getLocation(pt, function(rs){
                //let addComp = rs.addressComponents;
                //alert(`${rs.address}(${pt.lng},${pt.lat})`)
                addressInput.val(`${rs.address}`);
            });
        });


    });
</script>

</body>
</html>
